<template>
  <z-modal
    :width="900"
    title="发布消息"
    v-bind="modalOption"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model layout="horizontal" labelAlign="right" ref="ruleForm" :label-col="labelCol" :wrapper-col="wrapperCol" :model="form" :rules="validatorRules">
           <a-row>
            <a-col :span="24" >
              <a-form-model-item label="消息类型" >
                  <a-radio-group v-model="form.channel" >
                    <a-radio value="innerMsg">
                      站内信
                    </a-radio>
                    <a-radio :value="2">
                      系统消息
                    </a-radio>
                  </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="24" >
              <a-form-model-item label="标题" >
                <a-input :disabled="disableSubmit" v-model="form.messageTitle"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="24" >
              <a-form-model-item label="摘要" >
                <a-input :disabled="disableSubmit" type="textarea" v-model="form.memo"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="24" >
              <a-form-model-item label="截止日期" >
                <a-date-picker class="!w-full" :disabled="disableSubmit" v-model="form.date"/>
              </a-form-model-item>
            </a-col>
            <a-col :span="24" >
              <a-form-model-item label="接收用户" >
                <a-radio-group v-model="form.user1" >
                    <a-radio value="all">
                      全体用户
                    </a-radio>
                    <a-radio value="user">
                      指定用户
                    </a-radio>
                  </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="24" v-if="form.user1 === 'user'">
              <a-form-model-item label="指定用户" >
               <ZSelectUserByDep :button="false" v-model="form.to" placeholder="请选择指定用户" />
              </a-form-model-item>
            </a-col>
            <a-col :span="24" >
              <a-form-model-item label="优先级" >
                <a-radio-group v-model="form.level" >
                    <a-radio value="H">
                      高
                    </a-radio>
                    <a-radio value="M">
                      中
                    </a-radio>
                    <a-radio value="L">
                      低
                    </a-radio>
                  </a-radio-group>
              </a-form-model-item>
            </a-col>
            <a-col :span="24" >
              <a-form-model-item label="内容" >
                <quillEditor
                    v-model="form.messageContent"
                    ref="vueQuillEditor"
                    class="ql-editor-class"
                    style="height:300px;"
                    :class="{ chinesization:true }"
                    :options="{
                      placeholder:'请输入'
                    }"
                  >
                  </quillEditor>
              </a-form-model-item>
            </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </z-modal>
</template>

<script>
import ModalFormMixin from '@/mixins/ModalFormMixin'
import ZSelectUserByDep from '@/components/zzbiz/ZSelectUserByDep'
import { quillEditor } from 'vue-quill-editor' // 调用编辑器
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
export default {
  name: 'SendMessageModal',
  mixins: [ModalFormMixin],
  components: { ZSelectUserByDep, quillEditor },
  data() {
    return {
      url: {
        add: '/erp/inventory/lotconfig/add',
        edit: '/erp/inventory/lotconfig/edit'
      },
      validatorRules: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 4 }
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 20 }
      }
    }
  },
  methods: {
    addAfter() {
      this.$set(this.form, 'msgCategory', 1)
      this.$set(this.form, 'user1', 'all')
      this.$set(this.form, 'level', 'H')
    },
    submitAfter(res) {
      this.$message.success('保存成功')
      this.$emit('ok')
      if (this.editType === 'add') {
        this.editType = 'edit'
        this.disableSubmit = true
      } else {
        this.close()
      }
    }
  }
}
</script>
<style >
.ql-editor-class {
    -webkit-box-sizing: border-box;
    box-sizing        : border-box;
    line-height       : 1.42;
    height            : 100%;
    outline           : none;
    padding           : 0 0 66px;
    tab-size          : 4;
    -moz-tab-size     : 4;
    text-align        : left;
    word-wrap         : break-word;
  }
</style>
